<template>
  <div class="wrap">
    <!-- <a-input
      v-model="searchVal"
      @input="onSearch"
      class="search"
      placeholder="搜索群"
    >
      <template #prefix>
        <icon-search />
      </template>
    </a-input> -->
    <div class="address-book-right">
      <div v-for="group in currGroupList" :key="group.id">
        <div class="demo-point-trigger">
          <div class="person-item" @click="itemClick(group)">
            <PersonnelIcon
              :name="group.name"
              :headPortraits="group.headPortrait"
            />
            <div class="person-item-name">{{ group.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import PersonnelIcon from '../../Message/components/PersonnelIcon.vue';
import useClientContactsStore from '@/store/modules/client/contacts/index';
import { cloneDeep } from 'lodash';
import { useRouter } from 'vue-router';

const contactsStore = useClientContactsStore();
const router = useRouter();
const props = withDefaults(
  defineProps<{
    contactGroup: any[];
  }>(),
  {}
);

let currGroupList = ref<any>([]); // 当前的群列表

watch(
  () => props.contactGroup,
  (val) => {
    currGroupList.value = cloneDeep(val);
  }
);

let searchVal = ref('');

const onSearch = (val: string) => {
  currGroupList.value = props.contactGroup.filter((item: any) =>
    item.name.includes(val)
  );
};

//点击跳转群聊天窗口
const itemClick = (group: any) => {
  // 新增此聊天群信息到消息列表
  // group.userId = group.userId;
  group.groupId = group.id;
  contactsStore.setContacts(group);
  // console.log(props);

  router.push({ name: 'Message' });
};
</script>
<style lang="less" scoped>
.wrap {
  padding-top: 20px;
  flex: 1;

  .search {
    width: 250px;
    margin: 20px;
  }
  .address-book-right {
    flex: 1;
    overflow: auto;
    .person-item {
      height: 40px;
      padding: 10px;
      display: flex;
      font-size: 18px;
      align-items: center;
      &-name {
        margin-left: 10px;
      }
      &:hover {
        background: #eee;
        cursor: pointer;
      }
    }
  }
}
</style>
